<template>
        <div style="flex:3">
            <BMap ref="mymap" @click="handleClick" ak="ZLQSso00taWE2EgcUrWNPr2DzXkhjhdR" @pluginReady="handlePluginReady"
                :enable-scroll-wheel-zoom="true">
            </BMap>
        </div>
            <el-button @click="genLine">生成线路图</el-button>
</template>
<script setup lang="ts">

import { BMap, BMarker } from 'vue3-baidu-map-gl'

import { reactive } from 'vue'
import { Delete } from '@element-plus/icons-vue'
const mymap = ref(null)
const state = reactive({
    path: <any>[],
    view: null,
    linelayer: null,
    map: null,
    currentMarker: null,
    currentPoint: null
})

// 将所有单击获取到的点 保存到一个数组中 以供未来生成路线使用
const handleClick = (e) => {
    if (e.overlay == null) {

        state.path.push(e)
        let point = new window.BMapGL.Point(
            e.latlng.lng, e.latlng.lat
        );
        let marker = new window.BMapGL.Marker(point);

        marker.flag = new Date().toLocaleString();
        // 用于区分用户点击产生的mark 和 搜索产生的mark
        state.map.addOverlay(marker);

        // 生成可编辑的标签
        state.currentMarker = marker;
        state.currentPoint = point;
    } else {

        let allLayers = state.map.getOverlays();
        let targetmarker = allLayers.filter(ele => ele.flag == e.overlay.flag)
        if (targetmarker.length == 1) {
            state.currentMarker = targetmarker[0]
            console.log('当前marker', state.currentMarker)
        }
    }

    addLabel()


}


// 给旗帜添加标签
function addLabel() {

    // 创建信息窗口
    let opts = {
        width: 200,
        height: 100,
        title: "提示",
    };
    if (!state.currentMarker.record) {
        state.currentMarker.record = ''
    }
    console.log(state.currentMarker.record, '0000000000000000')
    let record = state.currentMarker.record
    let infoWindow = new window.BMapGL.InfoWindow(

        "<div><textarea rows='3' cols='25' value = '123' >123</textarea><button style=' margin-left:100px;' onclick='remove()'> 删除</button><button style='  ' onclick='save()'> 保存</button></div>",
        opts
    );
    // // 给标记添加点击事件
    let point = new window.BMapGL.Point(
        state.currentMarker.latLng.lng, state.currentMarker.latLng.lat
    );
    state.currentMarker.addEventListener("click", function (e) {
        state.map.openInfoWindow(infoWindow, point); // 开启信息窗口
        document.getElementsByTagName('textarea')[0].value = e.currentTarget.record
        document.getElementsByTagName('textarea')[0].addEventListener('input', function (ee) {
            state.currentMarker.record = ee.target.value
        })
    });
}

// 点击标签内的删除按钮 删除自己
// 这些标记信息保存到后台时，可以做成一个对象结构 类似于{lat:12.32,longtitude:59.34,count:3}
// 这里的count就是用于区分地图上的不同的标记，便于删除的时候进行操作
window.remove = function remove() {

    state.map.removeOverlay(state.currentMarker);

    state.map.closeInfoWindow();
}

window.record = function record(e) {
    console.log(e)

}

window.save = function record(e) {
    state.map.closeInfoWindow();

}



const handlePluginReady = (map) => {
    state.map = map
    let view = new mapvgl.View({
        map: map
    });

    state.view = view
    let lineLayer = new mapvgl.LineLayer({
        color: 'rgba(255, 71, 26, 0.9)',
        width: 4,
        animation: true,
        duration: 1, // 循环时间2s
        trailLength: 0.6, // 拖尾长度占间隔的0.4
        interval: 0.2 // 粒子长度占线整体长度的0.2
    });
    state.linelayer = lineLayer;

    view.addLayer(lineLayer);

}
const genLine = () => {

    // state.view.removeAllLayers()
    state.map.clearOverlays()
    const pathData = state.path.map(ele => [ele.latlng.lng, ele.latlng.lat])
    const data = [
        {
            "geometry": {
                "type": "LineString",
                "coordinates": pathData
            }
        },
    ];


    state.linelayer.setData(data);
    state.path.length = 0
    state.path = [];


}
</script>




<style scoped lang="scss">
.map {
    height: 500px;
    widows: 1000px;
}
</style>